<template>
  <div class='container'>
    <el-card class="box-card">
      <div style="text-align:right">
        <el-button class="addbtn"  @click="$router.push('new')" type="success" size="small"><i class="el-icon-edit"></i> 新增试题</el-button>
      </div>
    <!-- <el-row>
      <el-col :span="6" >
        <div class="grid-content bg-purple">1</div>
        </el-col>
      <el-col :span="6" ><div class="grid-content bg-purple-light">1</div></el-col>
      <el-col :span="6" ><div class="grid-content bg-purple"></div>1</el-col>
      <el-col :span="6" ><div class="grid-content bg-purple-light">1</div></el-col>
    </el-row> -->
  <el-form class="demo-form-inline" label-width="120px" size="small">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="6" >
      <el-form-item label="学科">
        <el-select  @change="changeSubject" placeholder="请选择" style="width:100%" v-model="requestParams.subjectID">
          <el-option
            v-for="item in subjectsList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="二级目录">
        <el-select  placeholder="请选择" style="width:100%" v-model="requestParams.catalogID">
           <el-option
            v-for="item in directorysList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="标签">
        <el-select  placeholder="请选择" style="width:100%" v-model="requestParams.tags">
          <el-option
            v-for="item in tagsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="关键字">
        <!-- <el-select  placeholder="关键字" style="width:100%">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select> -->
        <el-input
          placeholder=""
          style="width:100%"
          v-model="requestParams.keyword"
          >
        </el-input>
      </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row>
      <el-col :span="6" >
      <el-form-item label="试题类型">
        <el-select  placeholder="请选择" style="width:100%" v-model="requestParams.questionType">
           <el-option
            v-for="item in questionTypelist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="难度">
        <el-select  placeholder="请选择" style="width:100%" v-model="requestParams.difficulty">
            <el-option
            v-for="item in difficultylist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="方向">
        <el-select  placeholder="请选择" style="width:100%" v-model="requestParams.direction">
            <el-option
            v-for="item,value in directionlist"
            :key="value"
            :label="item"
            :value="value">
            </el-option>
        </el-select>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="录入人">
        <el-select  placeholder="请选择" style="width:100%" v-model="requestParams.creatorID">
          <el-option
            v-for="item in userlist"
            :key="item.id"
            :label="item.username"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      </el-col>
    </el-row>

    <!-- 第三行 -->
    <el-row>
      <el-col :span="6" >
      <el-form-item label="题目备注">
         <el-input
          placeholder=""
          style="width:100%"
          v-model="requestParams.remarks"
          >
        </el-input>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="企业简称">
         <el-input
          placeholder=""
          style="width:100%"
          v-model="requestParams.shortName"
          >
        </el-input>
      </el-form-item>
      </el-col>
      <el-col :span="6" >
      <el-form-item label="城市">
        <el-select @change="handleCity" placeholder="请选择" class="smallselect" style="width:47%" v-model="requestParams.province">
          <el-option
            v-for="item in provincesList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
          <el-select  placeholder="请选择" style="width:47%;margin-left:2%" v-model="requestParams.city">
          <el-option
            v-for="item in cityList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      </el-col>
    <el-col :span="6" >
      <el-form-item style="text-align:right">
        <el-button @click="clear">清除</el-button>
        <el-button @click="filter()" type="primary">搜索</el-button>
      </el-form-item>
    </el-col>
    </el-row>
  </el-form>
  <!-- 提示栏 -->
  <el-alert
    :title="`数据一共 ${total}条`"
    style="margin-bottom:20px"
    type="info"
    show-icon>
  </el-alert>

  <!-- 表格渲染 -->
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
      >
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
      >
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录">
      </el-table-column>
       <el-table-column
        prop="date"
        label="题型">
       <template slot-scope="scope" >
         {{questionTypelist.find(item=>item.value===+scope.row.questionType).label}}
       </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干" width="250">
        <template slot-scope="scope">
           <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间" width="180">
        <template slot-scope="scope">
          {{scope.row.addDate|parseTimeByString}}
        </template>
      </el-table-column>
       <el-table-column
        prop="difficulty"
        label="难度"
      >
       <template slot-scope="scope">
         {{difficultylist.find(item=>item.value===+scope.row.difficulty).label}}
       </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button plain type="info" size="mini" icon="el-icon-view" @click="opendialog(scope.row)" circle></el-button>
          <el-button plain type="primary" size="mini" icon="el-icon-edit" @click="$router.push(`new?id=${scope.row.id}`)" circle></el-button>
          <el-button plain type="warning" size="mini" icon="el-icon-delete" @click="remove(scope.row)" circle></el-button>
          <el-button plain type="success" size="mini" icon="el-icon-check" @click="addGood(scope.row.id)" circle></el-button>
       </template>
      </el-table-column>
    </el-table>
     <el-pagination
      style="margin-top:20px;text-align:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="requestParams.page"
      :page-sizes="[5,10,20,50]"
      :page-size="requestParams.pagesize"
       background
      layout="prev, pager, next, sizes, jumper"
      :total="total"
      >
    </el-pagination>
    </el-card>
    <questions-preview
    :questionInfo="questionInfo"
    :dialogVisible.sync="dialogVisible"
    ref="question"
    ></questions-preview>
  </div>
</template>

<script>
import { simple as subjectsList } from '@/api/hmmm/subjects.js'
import { simple as directorysList } from '@/api/hmmm/directorys.js'
import { simple as userList } from '@/api/base/users.js'
import { provinces as provincesList, citys as citysList } from '@/api/hmmm/citys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple as tagsList } from '@/api/hmmm/tags.js'
import { list as getList, remove, choiceAdd } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
export default {
  components: { questionsPreview },
  data () {
    return {
      questionInfo: {},
      dialogVisible: false,
      total: 0,
      list: [], // 表格列表
      subjectsList: [], // 学科列表
      directorysList: [], // 目录列表
      tagsList: [], // 标签列表
      questionTypelist: questionType, // 试题类型
      difficultylist: difficulty, // 难度
      directionlist: direction, // 方向
      userlist: [], // 录入人
      provincesList: provincesList(), // 录入人
      cityList: [], // 录入人
      //   信息
      requestParams: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        creatorID: null, // 录入人
        direction: null, // 方向
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        keyword: null, // 关键字
        province: null, // 省份
        city: null, // 城市
        tags: null, // 标签名称
        questionType: null, // 试题类型
        difficulty: null, // 难度
        page: 1, // 当前页数
        pagesize: 10 // 页尺寸
      }
    }
  },
  created () {
    this.getSubjectsList()
    this.getUserList()
    this.getList()
  },
  methods: {
    // 打开题目详情
    opendialog (question) {
      this.questionInfo = question
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.question.getDetail()
      })
    },
    // // 关闭对话框
    // closePreview () {
    //   this.dialogVisible = false
    //   // this.questionInfo = {}
    // },

    handleSizeChange (val) {
      this.requestParams.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.getList()
    },

    // 获取学科
    async getSubjectsList () {
      const { data } = await subjectsList()
      // console.log(data)
      this.subjectsList = data
    },
    // 获取录入人
    async getUserList () {
      const { data: users } = await userList()
      // console.log(data)
      this.userlist = users
    },
    // 获取二级目录和标签
    async changeSubject (subjectID) {
      this.requestParams.catalogID = null
      this.requestParams.tags = null
      if (subjectID) {
        const { data: directory } = await directorysList({ subjectID })
        this.directorysList = directory
        const { data: tags } = await tagsList({ subjectID })
        this.tagsList = tags
      } else {
        this.directorysList = []
        this.tagsList = []
      }
    },
    // 获取城市
    handleCity (cityName) {
      this.requestParams.city = null
      this.cityList = citysList(cityName)
    },
    // 清除
    clear () {
      this.requestParams = {
        subjectID: null, // 学科
        catalogID: null, // 目录
        creatorID: null, // 录入人
        direction: null, // 方向
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        keyword: null, // 关键字
        province: null, // 省份
        city: null, // 城市
        tags: null, // 标签名称
        questionType: null, // 试题类型
        difficulty: null // 难度
      }
      this.getList()
    },
    // 搜索
    filter () {
      this.getList()
    },
    // 获取列表
    async getList () {
      const { data } = await getList({ ...this.requestParams })
      console.log(data)
      this.list = data.items
      this.total = data.counts
    },
    //  添加精选
    async addGood (id) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      const res = await choiceAdd({ id, choiceState: 1 })
      this.$message.success('加入精选成功')
      console.log(res, 332255)
      this.getList()
    },
    // 删除题目
    async remove (row) {
      await this.$confirm('此操作将该题目永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      const res = await remove(row)
      this.$message.success('成功删除')
      console.log(res, 332255)
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>

  .box-card {
    margin: 10px 10px;

}

.demo-form-inline{
padding-top: 40px;
}
.smallselect{
  margin-right: 10px;
}

</style>
